<template>
  <div>
    <!-- 甘特图 -->
    <el-card>
      <div class="title">
        <img src="../../assets/gantt/甘特图.png" />
        <span>甘特图</span>
      </div>
      <div
        class="gantt_parent_container"
        :style="{height: height}"
      >
        <div class="gantt_left_table">
          <div class="gantt_column">
            <div
              class="gantt_th"
              v-for="(item,index) in tabColumn"
              :key="index"
              :style="{ width: item.width }"
            >
              {{ item.label }}
            </div>
          </div>
          <div
            class="gantt_tab_date"
            v-for="(item,index) in tableData"
            :key="index"
          >
            <div
              class="gantt_td"
              v-for="(items,indexs) in tabColumn"
              :key="indexs"
              :style="{
                width: items.width,
                height: taskHeight + 'px',
                lineHeight: taskHeight + 'px'
              }"
            >
              {{ item[items.props ]}}
            </div>
          </div>
        </div>
        <div class="gantt_right_date">
          <div class="gantt_column_date">
            <div
              class="gantt_date_th"
              v-for="(item,index) in dateColumn"
              :key="index"
              :style="{ width: `${item.width}px` }"
            >
              {{ item.label }}
            </div>
          </div>
          <div
            class="gantt_date_task"
            v-for="(item,index) in tableData"
            :key="index"
            :style="{
              height: taskHeight + 'px',
              lineHeight: taskHeight + 'px'
            }"
          >
            <div
              class="gantt_task_item"
              v-for="(items,indexs) in dateColumn"
              :key="indexs"
              :style="{
                width: `${items.width}px`

               }"
            >
              {{ item.KSSJ.substring(8,10) }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getMaximumDate, getFillInDate, getDaysApart, getNowTime } from './componentsFun.js'
export default {
  components: {},
  props: {
    height: {
      type: String,
      default: () => {
        return '70vh'
      }
    },
    // 表格表头
    tabColumn: {
      type: Array,
      default: () => {
        return [
          { label: '序号', props: 'XH', width: '60px' },
          { label: '项目名称', props: 'XMMC', width: '120px' },
          { label: '开始时间', props: 'KSSJ', width: '120px' },
          { label: '结束时间', props: 'JSSJ', width: '120px' }
        ]
      },
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return [
          {
            XH: '01', XMMC: 'XXXX项目', KSSJ: '2024-01-08', JSSJ: '2024-01-23',
            children: [
              { XH: '01', XMMC: 'XXXX项目(计划)', KSSJ: '2024-01-04', JSSJ: '2024-01-06' },
              { XH: '01', XMMC: 'XXXX项目(实施)', KSSJ: '2024-01-07', JSSJ: '2024-01-15' }
            ]
          },
          { XH: '02', XMMC: 'XXXX项目', KSSJ: '2024-01-04', JSSJ: '2024-01-15' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '04', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '05', XMMC: 'XXXX项目', KSSJ: '2024-01-01', JSSJ: '2024-01-20' },
          { XH: '06', XMMC: 'XXXX项目', KSSJ: '2024-01-11', JSSJ: '2024-01-20' },
          { XH: '07', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '08', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '09', XMMC: 'XXXX项目', KSSJ: '2024-01-05', JSSJ: '2024-01-20' },
          { XH: '10', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '11', XMMC: 'XXXX项目', KSSJ: '2024-01-07', JSSJ: '2024-01-20' },
          { XH: '12', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
        ]
      }
    },
    taskHeight: {
      type: Number,
      default: () => {
        return 60
      }
    }
  },
  data () {
    return {
      dateColumn: []
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.getDateColumn()
  },
  methods: {
    getDateColumn () {
      // 获取当日时间
      // const newDay = getNowTime().substring(0, 10)
      // 获取最大的结束时间
      // const bigDate = getMaximumDate(this.tableData, 'JSSJ')
      const dateTotal = getFillInDate('2024-01-24')
      const column = []
      dateTotal.map(item => {
        column.push({
          label: item.substring(8, 10),
          props: item,
          width: 30
        })
      })
      this.dateColumn = column
    }
  },
}
</script>
<style lang='less' scoped>
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  img {
    width: 20px;
    margin-right: 16px;
  }
  span {
    font-family: "ZiTiaoZiChangWuWei";
    font-size: 20px;
    color: #293231;
  }
}
.gantt_parent_container {
  width: 100%;
  display: flex;
  overflow: auto;
  .gantt_left_table {
    .gantt_column {
      display: flex;
      border-left: 1px solid #e3e4e6;
      .gantt_th {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #e3e4e6;
        border-bottom: 1px solid #e3e4e6;
        border-right: 1px solid #e3e4e6;
      }
    }
    .gantt_tab_date {
      display: flex;
      border-left: 1px solid #e3e4e6;
      .gantt_td {
        text-align: center;
        border-bottom: 1px solid #e3e4e6;
        border-right: 1px solid #e3e4e6;
      }
    }
  }
  .gantt_right_date {
    .gantt_column_date {
      display: flex;
      .gantt_date_th {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #e3e4e6;
        border-bottom: 1px solid #e3e4e6;
        border-right: 1px solid #e3e4e6;
      }
    }
    .gantt_date_task {
      display: flex;
      border-bottom: 1px solid #e3e4e6;
    }
    .gantt_task_item {
      text-align: center;
      border-right: 1px solid #e3e4e6;
    }
  }
}
</style>